<template>
  <div class="fps">
    {{ fps }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const times: number[] = []; // 存储当前的时间数组
const fps = ref();
function refreshLoop() {
  window.requestAnimationFrame(() => {
    const now = performance.now(); // 使用performance.now()能获取更高的精度
    while (times.length > 0 && times[0] <= now - 1000) {
      times.shift(); // 去掉1秒外的时间
    }
    times.push(now);
    fps.value = times.length;
    refreshLoop();
  });
}

refreshLoop();
</script>

<style lang="scss" scoped>
.fps {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 100000;
}
</style>
